<template>
  <div></div>
</template>

<script>
import { watchEffect, ref } from "vue";
export default {
  name: "watchEffect",
  setup() {
    // 立即执行
    // 响应式追踪依赖（自动依赖收集）
    // 无论什么时候依赖改变 就会重新执行
    // 在 setup 或者生命周期hook内部watchEffect执行的时候，监听器会自动连接到组件的生命周期上去
    // 在组建卸载的时候会自动停止
    // 另外,它会返回一个stop句柄函数来停止这个监听器

    // onInvalidate ==> watchEffect的入参 是一个函数 接收一个回调函数
		// 在effect是一个异步操作时，onInvalidate可以确保操作进行完成

    const count = ref(0);

    setTimeout(() => {
      count.value = 1;
    }, 1000);

    setTimeout(() => {
      count.value = 2;
    }, 3000);

    // watchEffect
    const stop = watchEffect((onInvalidate) => {
      // effect
      console.log("🌸watchEffect🌸" + count.value);
      //
      onInvalidate(() => {
        console.log("🌸onInvalidate 触发🌸");
      });
    });

    setTimeout(() => {
      stop();
      console.log("🌸watchEffect is stopped🌸");
    }, 2000);
  },
};
</script>

<style></style>
